<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
	var chartData;
</script>

<link href="includes/css/kendoUI/kendo.common.min.css" rel="stylesheet" />
<link href="includes/css/kendoUI/kendo.dataviz.min.css" rel="stylesheet" />

<script src="includes/js/jquery/jquery.min.js" type="text/javascript"></script>
<script src="includes/js/jquery/kendo.all.min.js"></script>
<script src="includes/js/jquery/kendo.timezones.min.js"></script>


<link rel="stylesheet" type="text/css" href="includes/css/pivot.css">



<script type="text/javascript"
	src="includes/js/jquery/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" src="includes/js/jquery/pivot.js"></script>

<script type="text/javascript" src="includes/js/jquery/kendo.js"></script>


</head>
<body>
	<script type="text/javascript">
		// 		google.load("visualization", "1", {
		// 			packages : [ "corechart", "charteditor" ]
		// 		});

		// 		$(function() {
		// 			var derivers = $.pivotUtilities.derivers;

		// 			$.getJSON("includes/js/data.json", function(mps) {
		// 				$("#output").pivotUI(
		// 						mps,
		// 						{
		// 							renderers : $.extend($.pivotUtilities.renderers,
		// 									$.pivotUtilities.kchart_renderers),
		// 							derivedAttributes : {
		// 								"Age Bin" : derivers.bin("Age", 10),
		// 								"Gender Imbalance" : function(mp) {
		// 									return mp["Gender1"] == "Male" ? 1 : -1;
		// 								}
		// 							},
		// 							cols : [ "Age Bin" ],
		// 							rows : [ "Gender1" ],
		// 							rendererName : "Area Chart"
		// 						});
		// 				alert(hi);
		// 			});

		// 		});

		$(function() {
			var derivers = $.pivotUtilities.derivers;

			$.getJSON("getPivotData.htm", function(mps) {
				$("#output").pivotUI(
						mps,
						{
							renderers : $.extend($.pivotUtilities.renderers,
									$.pivotUtilities.kchart_renderers),
							derivedAttributes : {
								"Award Date1" : derivers.dateFormat("Award Date", "%m-%y"),
								"Bid Date1" : derivers.dateFormat("Bid Date", "%m-%y")
							},
							
							cols : [],
							rows : [],
							rendererName : "Area Chart"
						});

			});

		});
	</script>
	<div>
		<div id="output" style="margin-left: 30px; border: 1px solid #D5E2C2"
			class="pivotTable"></div>
		<div style="margin: 30px;">
			<span>Select Chart Type : </span><select id="chartType">
				<option value="line">Line</option>
				<option value="bar">Bar</option>
				<option value="column">Column</option>
				<option value="pie">Pie</option>
			</select>
			<div id="chart1"></div>
		</div>
	</div>
</body>
</html>